<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="退款申请" title-color="#333" :border-bottom="false"
			title-size="36">
		</u-navbar>
		<view class="layoutView">
			<view class="layoutTitle">退款商品</view>
			<view class="goodsView" v-for="(item,index) in goodsList" :key="index">
				<u-image width="150rpx" height="150rpx" border-radius="10" 
					:src="item.goods_sku_cover_format"></u-image>
				<view class="goodsData">
					<text class="goodsTitle">{{item.goods_name}}</text>
					<view class="skuView">
						<text class="goodsSku">{{item.goods_sku_spec}}</text>
						<text class="goodsNum">x{{item.goods_number}}</text>
					</view>
					<view class="goodsPrice">¥{{item.goods_sku_price}}</view>
				</view>
			</view>
		</view>
		<view class="layoutView" v-if="orderInfo">
			<view class="layoutTitle" style="padding-bottom: 10rpx;">退款信息</view>
			<view class="itemView" @click="onShowType()">
				<view class="itemTitle">退款类型</view>
				<input class="itemInput" placeholder="请选择"
					placeholder-style="color:#999" disabled v-model="type_name"/>
				<u-icon size="15" name="/static/next.png"></u-icon>
			</view>
			<view class="itemView" style="margin-bottom: 10rpx;">
				<view class="itemTitle">退款金额</view>
				<view class="itemPrice">¥{{orderInfo.pay_amount}}</view>
			</view>
		</view>
		<view class="layoutView" v-if="type_index == 2">
			<view class="layoutTitle" style="padding-bottom: 10rpx;">退款物流信息</view>
			<view class="itemView" @click="onShowExpress()">
				<view class="itemTitle">物流公司</view>
				<input class="itemInput" placeholder="请选择" placeholder-style="color:#999" disabled
					v-model="support_express_name" />
				<u-icon size="15" name="/static/next.png"></u-icon>
			</view>
			<view class="itemView" style="margin-bottom: 10rpx;">
				<view class="itemTitle">物流单号</view>
				<input class="itemInput2" placeholder="请输入物流单号" 
					placeholder-style="color:#999" v-model="support_express_number"/>
			</view>
		</view>
		<view class="layoutView" v-if="orderInfo">
			<view class="layoutTitle">退款原因和凭证</view>
			<textarea class="inputData" placeholder="请描述退款原因,有助于商家更好处理售后问题"
				placeholder-style="color:#999" v-model="refund_reason"></textarea>
			<view class="uploadView">
				<u-upload ref="uUpload" :action="action" :custom-btn="true"
					:show-progress="false" max-count="9"
				 @on-change="onUpload" @on-remove="onRemove">
					<u-icon slot="addBtn" name="/static/upload.png" size="200"></u-icon>
				</u-upload>
			</view>
		</view>
		<view class="postView" @click="onOrderReturn()">确认申请</view>
		<view class="H20"></view>
		<u-picker mode="selector" v-model="typeDialog" :range="typeList"
			range-key="name" @confirm="onTypeConfirm">
		</u-picker>
		<u-picker mode="selector" v-model="expressDialog" :range="expressList" range-key="name"
			@confirm="onExpressConfirm">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'https://shop.idzg.cn/api/public/images/upload',
				typeDialog: false,
				expressDialog: false,
				orderid: '',
				orderInfo: '',
				goodsList: [],
				typeList: [{
					name: '仅退款'
				}, {
					name: '退货退款'
				}],
				type_index: 0,
				type_name: '',
				expressList: [],
				support_express_id: '',
				support_express_name: '',
				support_express_number: '',
				refund_reason: '',
				refund_images: []
			}
		},
		onLoad(res) {
			this.orderid = this.$utils.strEmpty(res.id);
			this.initData();
		},
		methods: {
			initData() {
				let self = this;
				self.$user.orderDetails(this.orderid, true, true).then(res => {
					self.orderInfo = res.data;
					self.goodsList = res.data.goods;
				});
				self.$api.expressesList({}, false, false).then(res => {
					self.expressList = res.data;
				});
			},
			onShowType(){
				this.typeDialog = true;
			},
			onTypeConfirm(e){
				let index = e[0];
				this.type_index = index + 1;
				this.type_name = this.typeList[index].name;
			},
			onShowExpress() {
				this.expressDialog = true;
			},
			onExpressConfirm(e) {
				let index = e[0];
				this.support_express_id = this.expressList[index].id;
				this.support_express_name = this.expressList[index].name;
			},
			onUpload(res) {
				if (res.statusCode == 200) {
					let json = JSON.parse(res.data);
					this.refund_images.push(json.data);
				}
			},
			onRemove(index) {
				this.refund_images.splice(index, 1);
			},
			onOrderReturn() {
				let self = this;
				if(this.type_index <= 0){
					this.$utils.tips('请选择退款类型');
					return
				}
				if(this.type_index == 2){
					if(this.$utils.isEmpty(this.support_express_id)){
						this.$utils.tips('请选择物流公司');
						return
					}
					if(this.$utils.isEmpty(this.support_express_number)){
						this.$utils.tips('请输入物流单号');
						return
					}
				}
				// if(this.$utils.isEmpty(this.refund_reason)){
				// 	this.$utils.tips('请输入退款原因');
				// 	return
				// }
				// if(this.refund_images.length <= 0){
				// 	this.$utils.tips('请上传凭证');
				// 	return
				// }
				self.$user.orderReturn({
					order_id: this.orderid,
					refund_images: this.refund_images,
					refund_reason: this.refund_reason,
					type: this.type_index,
					support_express_id: this.support_express_id,
					support_express_number: this.support_express_number
				}, true).then(res => {
					self.$utils.tips('申请成功');
					setTimeout(function() {
						uni.navigateBack();
					}, 500)
				});
			}
		}
	}
</script>

<style>
	@import url('order-return.css');
	
	page {
		background: #f5f5f5;
	}
</style>
